<script setup>
  
import { reactive, ref} from "vue";
import useDebounce from "../hooks/useDebounce";
import useThrottle from "../hooks/useThrottle";
import useToTree from "../hooks/useToTree";
import useSort from "../hooks/useSort";
import { ElButton, ElInput } from 'element-plus'

// 数据
let info = reactive({ name: "张三", age: 20 });

// 事件
const inputChange = useThrottle((e,a,b)=>{
  console.log(info,e,a,b)
},2000)
const getMessage =  (msg)=>{
    console.log(msg)
}
const prop =  defineProps({
  name:{
		type:String,
		require:true,
	}
})


// 向父组件暴露方法或数据
defineExpose({info,inputChange,getMessage})
// 自定义事件通知父组件
const emit =   defineEmits(['pushMessage','dleNewAttr'])
const btn = ()=>{
   emit('pushMessage',info.age)
}
const dleBtn = ()=>{
  emit('dleNewAttr',info.newAttr)
}

const toTree = ()=>{
  let list = [
            {
                id: 1,
                pid: 0,
                name: "总公司",
            },
            {
                id: 2,
                pid: 1,
                name: "北京分公司",
            },
            {
                id: 3,
                pid: 1,
                name: "上海分公司",
            },
            {
                id: 4,
                pid: 2,
                name: "北京子公司",
            },
            {
                id: 5,
                pid: 3,
                name: "上海子公司",
            },
            {
                id: 6,
                pid: 1,
                name: "湖南分公司",
            },
        ];
  let myData =  useToTree(list,0)
  console.log(myData)
}
const mySort = ()=>{
  const arr = [3, 5, 74, 64, 64, 3, 1, 8, 3, 49, 16, 161, 9, 4]
  let result = useSort(arr,'desc')
  console.log(result)

}
const a = ()=>{
  console.log('渲染')
}

</script>

<template>
  <div>{{ a() }}----{{ prop.name }}</div>
  <input type="text" v-model="info.name" @input="inputChange" />
  <button @click="btn">自定义事件</button>
  <button @click="dleBtn">子组件：删除新属性</button>
  <button @click="toTree">转换为树节点</button>
  <button @click="mySort">冒泡排序</button>
  <el-button>我是 ElButton</el-button>
  <el-input></el-input>

</template>


